import React, { useState, useEffect } from 'react';
import { DownOutlined } from '@ant-design/icons';

import axios from '../../../utils/myAixos.js'
import '../MemberCart/MemberCart.css'
import { useNavigate } from 'react-router-dom'
import { Input, Button, Table, Dropdown, Form, Space, Select, Popconfirm, message } from 'antd';
//下拉框
const handleButtonClick = (e) => {
    message.info('Click on left button.');
    console.log('click left button', e);
};
const handleMenuClick = (e) => {
    message.info('Click on menu item.');
    console.log('click', e);
};
const items = [
    {
        label: '正常',
        key: '1',
    },
    {
        label: '已停用',
        key: '2',
    },
    {
        label: '已失效',
        key: '3',
    },
    {
        label: '暂停中',
        key: '4',
    },
];
const menuProps = {
    items,
    onClick: handleMenuClick,
};


const MemberCart = () => {
    //跳转
    const navigate = useNavigate()
    const Edit = (row) => {
        console.log('确定编辑按钮', row.m_id)
        navigate('/HomePage/EditCart', {
            state: {
                id: row.m_id,
                m_class: row.m_class,
            }
        })
    }
    // onClick={() => navigate('/HomePage/ChaKanCart')}
    //查看
    const Chakan = (row) => {
        console.log('确定编辑按钮', row.c_id)
        navigate('/HomePage/ChaKanCart', {
            state: {
                id: row.m_id,
                m_carname: row.m_carname,
                m_name: row.m_name,
                m_phone: row.m_phone,
                m_discount: row.m_discount,
                m_status: row.m_status,
                m_money: row.m_money,
                m_class: row.m_class,
                m_address: row.m_address,
                m_name: row.m_name,

            }
        })
        // navigate('/HomePage/ChakanCoach')}
    }
    //表格
    const columns = [
        {
            title: '会员卡',
            dataIndex: 'm_carname',
            key: '1',
            align: 'center',
        },
        {
            title: '会员名',
            dataIndex: 'm_name',
            key: '2',
            align: 'center',
        },
        {
            title: '手机号',
            dataIndex: 'm_phone',
            key: '3',
            align: 'center',

        },
        {
            title: '折扣',
            dataIndex: 'm_discount',
            key: '4',
            align: 'center',

        },
        {
            title: '会员状态',
            dataIndex: 'm_status',
            key: '5',
            align: 'center',

        },
        {
            title: '会员余额',
            dataIndex: 'm_money',
            key: '6',
            align: 'center',

        },
        {
            title: '操作',
            dataIndex: 'm_caozuo',
            key: '7',
            align: 'center',
            render: (_, record) => (
                <Space size="middle">
                    <a type="primary" onClick={() => Chakan(record)} >查看</a>
                </Space>
            ),
        },

    ];
    //表格2
    const columns2 = [
        {
            title: '会员卡',
            dataIndex: 'm_dengji',
            key: '8',
            align: 'center',
        },
        {
            title: '会员卡类型',
            key: '9',
            dataIndex: 'm_class',
            align: 'center',
        },
        {
            title: '支持场馆',
            dataIndex: 'm_address',
            key: '10',
            align: 'center',

        },


        {
            title: '操作',
            key: '11',
            dataIndex: 'm_caozuo',
            align: 'center',
            render: (_, record) => (
                <Space size="middle">
                    <a type="primary" onClick={() => Edit(record)}>编辑</a>
                    <Popconfirm
                        title="Delete the task"
                        description="确定删除吗？"
                        onConfirm={() => confirmDel(record)}
                        onCancel={cancelDel}
                        okText="Yes"
                        cancelText="No"
                    >
                        <a type="primary" htmlType="submit" onFinish={confirmDel}>停用</a>
                        {/* <Button type={"dashed"}>删除</Button> */}
                    </Popconfirm>
                </Space>
            ),
        },

    ];
    const [dataList, setDataList] = useState([]); //表格数据
    const [datamList, setDatamList] = useState([]); //表格数据
    //设置到添加
    const [isShow, setisShow] = useState(true);
    const [iszhan, setiszhan] = useState(true);
    const Shezhi = () => {
        let a = false
        //  console.log(isShow);
        setisShow(a);
        console.log(isShow);
        setiszhan(a)
        console.log(iszhan);
        getCar()
    }



    //获取会员卡数据
    const getCar = () => {
        axios({
            url: '/getCarData',
            method: 'post'
        }).then(res => {
            console.log('获取所有会员卡数据1', res.data.data)
            console.log(res.status)
            if (res.status === 200) {
                setDatamList(res.data.data)
            }
        }).catch(err => {
            console.log('获取所有会员卡数据2', err)
        })
    }

    //1、获取到所有会员的数据
    useEffect(() => {
        getCar()
    }, [])






    //获取会员数据
    const getStu = () => {
        axios({
            // url: '/getCarData',
            url: '/getMemberData',
            method: 'post'
        }).then(res => {
            console.log('获取所有会员卡数据1', res.data.data)
            console.log(res.status)
            if (res.status === 200) {
                setDataList(res.data.data)
            }
        }).catch(err => {
            console.log('获取所有会员卡数据2', err)
        })
    }
    //1、获取到所有会员的数据
    useEffect(() => {
        getStu()
    }, [])




    //确定删除
    const confirmDel = (row) => {
        console.log('确定删除按钮', row)
        //发请求
        axios({
            url: '/mcarDelss',
            method: 'post',
            data: {
                m_dengji: row.m_dengji,
                m_id: row.m_id
            }
        }).then(res => {
            console.log('删除会员卡数据', res)
            console.log(res.code, 233333);
            if (res.status == 200) {
                console.log("cg");
                message.success("停用成功")
                getCar()
            } else {
                console.log("cg");
                message.success("停用失败")
                getCar()
            }
        }).catch(err => {
            console.log('停用会员卡数据', err)
        })
    }
    const cancelDel = () => {

    }
    //点击查询
    const search = (params) => {
        console.log("search1111");
        console.log('7777', params)
        axios({
            url: '/mcarSeacher',
            method: 'post',
            data: params
        }).then(res => {
            console.log('查询w2324会员卡结果', res.data)
            if (res.status === 200) {
                //获取成功
                // res.data
                setDataList(res.data.data)
                message.success('查询成功')
            } else {
                message.error('查询成功')

            }
        }).catch(err => {
            console.log('查询会员卡的结果', err)
        })
    }
    return (
        <div class="boxMemberCart">
            {/* 按钮栏 */}
            <div class="titleMemberCart">
                <Form
                    name="horizontal_login"
                    layout="inline"
                    onFinish={search}
                >
                    <Form.Item
                        name="m_carname"
                    >
                        <Input placeholder="会员卡类型" />
                    </Form.Item>

                    <Form.Item
                        name="m_status"
                    >
                        <Select
                            defaultValue="会员状态"
                            style={{
                                width: 120,
                            }}
                            options={[
                                {
                                    value: '正常',
                                    label: '正常',
                                },
                                {
                                    value: '停用',
                                    label: '停用',
                                },

                            ]}
                        />

                    </Form.Item>
                    <Form.Item shouldUpdate>
                        {() => (
                            <Button
                                type="primary"
                                htmlType="submit"
                            >
                                查询
                            </Button>
                        )}
                    </Form.Item>

                </Form>
                {
                    iszhan ? (<div><Button onClick={Shezhi} >设置会员卡</Button></div>) : (<div><Button onClick={() => navigate('/HomePage/AddCart')} >添加</Button></div>)
                }
            </div>

            {/* 表单 */}

            {/* <div style={{ display: isShowt }}>nugyuui</div> */}
            {
                isShow ? (<div class="body"  ><Table rowKey={record => record.m_id} columns={columns} dataSource={dataList} /></div>) : (<div class="body"  ><Table rowKey={record => record.m_id} columns={columns2} dataSource={datamList} /></div>)
            }
        </div >

    )
}

export default MemberCart